<template>
  <dl>
    <dt class="fs40 pb20 fw-b">type</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" @click="handleClick">default</t-button>
      <t-button type="primary" @click="handleClick">primary</t-button>
      <t-button type="success" @click="handleClick">success</t-button>
      <t-button type="warning" @click="handleClick">warning</t-button>
      <t-button type="danger" @click="handleClick">danger</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="type"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">link</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" link @click="handleClick">default</t-button>
      <t-button type="primary" link @click="handleClick">primary</t-button>
      <t-button type="success" link @click="handleClick">success</t-button>
      <t-button type="warning" link @click="handleClick">warning</t-button>
      <t-button type="danger" link @click="handleClick">danger</t-button>
      <t-button type="default" link loading @click="handleClick">default</t-button>
      <t-button type="primary" link loading @click="handleClick">primary</t-button>
      <t-button type="success" link loading @click="handleClick">success</t-button>
      <t-button type="warning" link loading @click="handleClick">warning</t-button>
      <t-button type="danger" link loading @click="handleClick">danger</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="link"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">plain</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" plain @click="handleClick">default</t-button>
      <t-button type="primary" plain @click="handleClick">primary</t-button>
      <t-button type="success" plain @click="handleClick">success</t-button>
      <t-button type="warning" plain @click="handleClick">warning</t-button>
      <t-button type="danger" plain @click="handleClick">danger</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="plain"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">loading</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" plain loading>default</t-button>
      <t-button type="primary" plain loading>primary</t-button>
      <t-button type="success" plain loading>success</t-button>
      <t-button type="warning" plain loading>warning</t-button>
      <t-button type="danger" plain loading>danger</t-button>
      <t-button type="default" loading>default</t-button>
      <t-button type="primary" loading>primary</t-button>
      <t-button type="success" loading>success</t-button>
      <t-button type="warning" loading>warning</t-button>
      <t-button type="danger" loading>danger</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="loading"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">disabled</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" plain disabled>default</t-button>
      <t-button type="primary" plain disabled>primary</t-button>
      <t-button type="success" plain disabled>success</t-button>
      <t-button type="warning" plain disabled>warning</t-button>
      <t-button type="danger" plain disabled>danger</t-button>
      <t-button type="default" disabled>default</t-button>
      <t-button type="primary" disabled>primary</t-button>
      <t-button type="success" disabled>success</t-button>
      <t-button type="warning" disabled>warning</t-button>
      <t-button type="danger" disabled>danger</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="disabled"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">radius</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" plain radius @click="handleClick">default</t-button>
      <t-button type="primary" plain radius @click="handleClick">primary</t-button>
      <t-button type="success" plain radius @click="handleClick">success</t-button>
      <t-button type="warning" plain radius @click="handleClick">warning</t-button>
      <t-button type="danger" plain radius @click="handleClick">danger</t-button>
      <t-button type="default" radius="4" @click="handleClick">default</t-button>
      <t-button type="primary" radius="8" @click="handleClick">primary</t-button>
      <t-button type="success" radius="16" @click="handleClick">success</t-button>
      <t-button type="warning" radius="20" @click="handleClick">warning</t-button>
      <t-button type="danger" radius="32" @click="handleClick">danger</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="radius"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">leftIcon | rightIcon</dt>
    <dd class="d-f fw-w gap10">
      <t-button type="default" left-icon="icon-search" @click="handleClick">default</t-button>
      <t-button type="default" right-icon="icon-search" @click="handleClick">default</t-button>
      <t-button type="primary" @click="handleClick">
        <template #left>
          <img class="w30" src="@/assets/logo.png" alt="logo">
        </template>
        slot方式
        <template #right>
          <img class="w30" src="@/assets/logo.png" alt="logo">
        </template>
      </t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="icon"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { TMessage } from '@/base/directive/TMessage/globalMessage'

const type = `<t-button type="default">default</t-button>
<t-button type="primary">primary</t-button>
<t-button type="success">success</t-button>
<t-button type="warning">warning</t-button>
<t-button type="danger">danger</t-button>`

const link = `<t-button type="default" link>default</t-button>
<t-button type="primary" link>primary</t-button>
<t-button type="success" link>success</t-button>
<t-button type="warning" link>warning</t-button>
<t-button type="danger" link>danger</t-button>
<t-button type="default" link loading>default</t-button>
<t-button type="primary" link loading>primary</t-button>
<t-button type="success" link loading>success</t-button>
<t-button type="warning" link loading>warning</t-button>
<t-button type="danger" link loading>danger</t-button>`

const plain = `<t-button type="default" plain>default</t-button>
<t-button type="primary" plain>primary</t-button>
<t-button type="success" plain>success</t-button>
<t-button type="warning" plain>warning</t-button>
<t-button type="danger" plain>danger</t-button>`

const loading = `<t-button type="default" plain loading>default</t-button>
<t-button type="primary" plain loading>primary</t-button>
<t-button type="success" plain loading>success</t-button>
<t-button type="warning" plain loading>warning</t-button>
<t-button type="danger" plain loading>danger</t-button>
<t-button type="default" loading>default</t-button>
<t-button type="primary" loading>primary</t-button>
<t-button type="success" loading>success</t-button>
<t-button type="warning" loading>warning</t-button>
<t-button type="danger" loading>danger</t-button>`

const disabled = `<t-button type="default" plain disabled>default</t-button>
<t-button type="primary" plain disabled>primary</t-button>
<t-button type="success" plain disabled>success</t-button>
<t-button type="warning" plain disabled>warning</t-button>
<t-button type="danger" plain disabled>danger</t-button>
<t-button type="default" disabled>default</t-button>
<t-button type="primary" disabled>primary</t-button>
<t-button type="success" disabled>success</t-button>
<t-button type="warning" disabled>warning</t-button>
<t-button type="danger" disabled>danger</t-button>`

const radius = `<t-button type="default" plain radius>default</t-button>
<t-button type="primary" plain radius>primary</t-button>
<t-button type="success" plain radius>success</t-button>
<t-button type="warning" plain radius>warning</t-button>
<t-button type="danger" plain radius>danger</t-button>
<t-button type="default" radius="4">default</t-button>
<t-button type="primary" radius="8">primary</t-button>
<t-button type="success" radius="16">success</t-button>
<t-button type="warning" radius="20">warning</t-button>
<t-button type="danger" radius="32">danger</t-button>`

const icon = `<t-button type="default" left-icon="icon-search">default</t-button>
<t-button type="default" right-icon="icon-search">default</t-button>
<t-button type="primary">
  <template #left>
    <img class="w30" src="@/assets/logo.png">
  </template>
  slot方式
  <template #right>
    <img class="w30" src="@/assets/logo.png">
  </template>
</t-button>`

const handleClick = () => {
  TMessage.success('3T-UI')
}
</script>
